Namespace("sketch.ui.iphone");

(function(fwk, ui) {
    ui.iphone.Switch = klass(ui.common.StackPanel, {
        _constructor: function() {
            var that = this;

            this.properties.createProperty("enabled", "Enabled", true)
                .editorTemplate("#editor-checkbox");
            this.properties.createProperty("labelEnabled", "Text when on", "ON")
                .editorTemplate("#editor-textbox");
            this.properties.createProperty("labelDisabled", "Text when off", "OFF")
                .editorTemplate("#editor-textbox");

            this._handle = new fwk.Rectangle();
            //this._handle.margin(new fwk.Box(1, 1, 1, 1));
            this._handle.width(39);
            this._handle.canSelect(false);
            this._handle.cornerRadius(3);
            this._handle.fillResourceGradient("switch_handle");
            this._handle.strokeStyle("#888888");

            this._label = new ui.iphone.Label();
            this._label.canSelect(false);
            this._label.verticalAlign("middle");
            this._label.textAlign("center");
            this._label.width(50);

            var font = this._label.font();
            font.bold(true);
            font.size(12);
            font.lineHeight(25);

            this.properties.enabled.bind(function(event) {
                that.clear();
                that._label.zOrder(0);
                that._handle.zOrder(0);

                if (event.newValue) {
                    that._label.font().color("#FFF");
                    that._label.text(that.labelEnabled());
                    that.properties.labelDisabled.unbind(that._label.properties.text.bindingPoint);
                    that.properties.labelEnabled.bind(that._label.properties.text.bindingPoint);

                    that.add(that._label);
                    that.add(that._handle);
                }
                else {
                    that._label.font().color("#6D6D6D");
                    that._label.text(that.labelDisabled());
                    that.properties.labelEnabled.unbind(that._label.properties.text.bindingPoint);
                    that.properties.labelDisabled.bind(that._label.properties.text.bindingPoint);

                    that.add(that._handle);
                    that.add(that._label);
                }
            });

            this.orientation("horizontal");
            this.height(27);
            this.autoWidth(true);
            this.enabled(true);
        },

        enabled: function(value) {
            return this.properties.enabled(value);
        },
        labelEnabled: function(value) {
            return this.properties.labelEnabled(value);
        },
        labelDisabled: function(value) {
            return this.properties.labelDisabled(value);
        },
        resizeDimensions:function(){
            return fwk.ResizeDimension.None;
        },
        drawSelf: function(context){
            var l = this.left(),
                t = this.top(),
                w = this.width(),
                h = this.height();

            context.save();

            var backgroundResource = this.enabled() ? "switch_on" : "switch_off";
            var brush = fwk.Resources[backgroundResource].toBrush(context, l, t, l, t + h);
            context.roundedRect(l, t, w, h, 3, brush, "#B1B1B1");

            context.restore();

            this.SuperKlass.drawSelf.apply(this, arguments);
        }
    });
})(sketch.framework, sketch.ui);